import { PageContainer } from '@ant-design/pro-layout';
import React, { Component } from 'react';
import ReactGridLayout from 'react-grid-layout';
import './index.less';

export default class index extends Component {
  render() {
    const layout = [
      {
        w: 7,
        h: 10,
        x: 0,
        y: 0,
        i: 'a',
      },
      {
        w: 2,
        h: 3,
        x: 7,
        y: 4,
        i: 'b',
      },
      {
        w: 1,
        h: 2,
        x: 7,
        y: 0,
        i: 'c',
      },
    ];
    return (
      <PageContainer>
        <ReactGridLayout
          onDragStop={(newItem) => {
            // 获取当前layout
            console.log(newItem);
          }}
          className="layout"
          layout={layout}
          cols={12}
          rowHeight={30}
          width={1200}
        >
          <div style={{ backgroundColor: '#fff' }} key="a"></div>
          <div style={{ backgroundColor: '#000' }} key="b"></div>
          <div style={{ backgroundColor: '#ccc' }} key="c"></div>
        </ReactGridLayout>
      </PageContainer>
    );
  }
}
